<template>
  <div>
    <MBX Biao="商品管理" Biao1="商品列表"></MBX>
    <el-card class="mt">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            v-model="Input.query"
            class="input-with-select"
            clearable
            @input='sou'
            @clear='sou'
            
          >
            <el-button slot="append" icon="el-icon-search" @click="sou"></el-button>
          </el-input>
        </el-col>
        <el-col :span="14">
          <el-button type="primary" @click='add'>添加商品</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table class="mt" :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#" width="80"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="640">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="130">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="130">
        </el-table-column>
        <el-table-column prop="upd_time" label="创建时间" width="130">
           <template slot-scope="scope">
             <div>
               {{scope.row.upd_time |shijianfilter}}
             </div>
           </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="143">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button @click=del(scope.row.goods_id) size="mini" type="danger" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->

      <!-- 分页 -->
      <div class="mt">
        
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Input.pagenum"
          :page-sizes="[3, 6, 9]"
          :page-size="Input.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!--  -->
    </el-card>
  </div>
</template>

<script>
import { getGoods ,delOne} from "@/http/api";
import _ from 'lodash';
export default {
  data() {
    return {
      Input: {
        //商品列表信息获取
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      tableData: [],
      total:0
    };
  },
  created() {
    this.getGlist();
    
  },
 
  methods: {
    //获取时间戳
    getTime:function(){
        
    },
    //添加商品
    add(){
       this.$router.push('/add')
    },
    //删除单个商品
    async del(id){
      const res=await this.$confirm('你敢删我, 嗯?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        })

        if(res==='confirm'){
          //调用封装的删除接口
          await delOne(id);
          console.log("删除单个数据", res);
          // this.getGlist();
        }
    },
    //搜索
    sou:_.debounce(function(){
        this.getGlist();
    },300),
    async getGlist() {
      const res = await getGoods(this.Input);
      console.log("商品列表信息", res);
      this.tableData = res.goods;
      this.total=res.total
    },
    handleSizeChange(val){
      this.Input.pagesize=val
      this.getGlist()
    },
    handleCurrentChange(val){
      this.Input.pagenum=val
      this.getGlist()
    }
  },
};
</script>

<style scoped>

</style>
